<template>
  <div class="imageTextNavSet">
    <div class="deco-help-desc">
      最多添加 10 个导航，拖动选中的导航可对其排序
    </div>
    <div class="group-wrap">
      <draggable :list="config.sub_entry" class="list-group" :animation="200">
        <div
          class="list-group-item"
          v-for="(item, index) in config.sub_entry"
          :key="index"
        >
          <div class="uploader-wrap">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="item.image_url" :src="item.image_url" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p class="addImage">添加图片</p>
          </div>
          <div class="item-content">
            <el-form ref="form" label-width="60px">
              <el-form-item
                label="标题"
                class="formItem"
                style="margin-bottom:10px;"
              >
                <el-input v-model="item.title" />
              </el-form-item>
              <el-form-item label="链接" class="formItem">
                <el-input v-model="item.link" />
              </el-form-item>
            </el-form>
          </div>
          <div class="item-delete" @click="deleteListItem(index)">
            <i class="el-icon-error"></i>
          </div>
        </div>
      </draggable>
      <div class="list-group">
        <div class="list-group-item" style="padding:0;">
          <div class="edit-add" @click="addNav">添加图文导航</div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="deco-control">
      <div class="deco-control-group">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">选择模板</div>
            <div class="deco-control-group__value">
              {{ config.show_method ? '图片导航' : '文字导航' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.show_method" size="mini">
              <el-radio :label="0" style="margin-right: 12px;">图片导航</el-radio>
              <el-radio :label="1">文字导航</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ['value'],
  data() {
    return {
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.config.image_url = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    deleteListItem(index) {
      this.config.sub_entry.splice(index, 1)
    },
    addNav() {
      this.config.sub_entry.push({
        image_height: 100,
        image_id: '1228',
        image_thumb_url:
          'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
        image_url:
          'https://b.yzcdn.cn/public_files/2019/03/05/bd8a4dea63577aa7d5297c30dcd0d0bf.png',
        image_width: 100,
        title: '导航X',
        type: 'image_ad_selection',
        link: ''
      })
    }
  }
}
</script>

<style lang="less">
@import './common.less';
.imageTextNavSet {
  .deco-help-desc {
    margin: 10px;
  }

  .list-group-item {
    .uploader-wrap {
      text-align: center;
      padding-left: 20px;
      .addImage {
        width: 100%;
        margin-top: 5px;
        font-size: 12px;
        color: #d40000;
      }
      .avatar-uploader {
        width: 60px;
        height: 60px;
        border: 1px solid #f2f4f6;
        .el-upload {
          width: 100%;
          height: 100%;
          .avatar {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
